<template>
    <div class="container">
		<el-form>
        <h3>田间管理</h3>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margini-top:20px;">
            <el-tab-pane label="整地" name="整地">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="整地方式：">
                                <el-select v-model="ruleForm.way" placeholder="请选择" style="width:300px;">
                                    <el-option label="机械" value="机械"></el-option>
                                    <el-option label="人工" value="人工"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作图片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                               
                            </el-form-item>
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="移栽" name="移栽">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="选择地块：">
                                <el-select v-model="soilId" @change="getdk" placeholder="" value-key="id" style="width:300px">
                                    <el-option v-for="item in plotlist" :key="item.id"  :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作图片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                                
                            </el-form-item>
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="灌溉" name="灌溉">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="灌溉方式：">
                                <el-select v-model="ruleForm.way" placeholder="请选择" style="width:300px;">
                                    <el-option label="喷灌" value="喷灌"></el-option>
                                    <el-option label="滴灌" value="滴灌"></el-option>
                                    <el-option label="漫灌" value="漫灌"></el-option>
                                </el-select>  
                            </el-form-item>
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作图片：">
                                <el-upload
                                    class="upload-poster"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                               
                            </el-form-item>
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="施肥" name="施肥">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-table
                            :data="ruleForm.list"
                            bordero                            style="margin-top:20px;"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        >
                            <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                            <el-table-column sortable label="规格">
                                <template slot-scope="scope">{{scope.row.spec}}{{scope.row.specUnits}}</template>
                            </el-table-column>
                           <el-table-column sortable label="数量">
                               <template slot-scope="scope">
								   <el-input v-model="scope.row.useNumber" @change="compare(scope.$index, scope.row)" style="width:200px;"></el-input>
								   <span style="margin-left:10px;">{{scope.row.units}}</span>
							   </template>
                           </el-table-column>
                            <el-table-column prop="supply" sortable label="供应商"></el-table-column>
                            <el-table-column prop="buyTime" sortable label="购买时间"></el-table-column>
                        </el-table>
                        <div @click="addManure" class="addManure">添加肥料</div>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-col :span="10">
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                               
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作图片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="除草" name="除草">
				
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
					<el-form-item label="除草方式：">
					    <el-select v-model="ruleForm.way" placeholder="请选择" @change="selectny" style="width:300px;">
					        <el-option label="机械" value="机械"></el-option>
					        <el-option label="人工" value="人工"></el-option>
							<el-option label="农药" value="农药"></el-option>
					    </el-select>  
					</el-form-item>
                    <el-row v-if="nyshow">
                        <el-table
                            :data="ruleForm.list"
                            bordero                            style="margin-top:20px;"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        >
                            <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                            <el-table-column sortable label="规格">
                                <template slot-scope="scope">{{scope.row.spec}}{{scope.row.specUnits}}</template>
                            </el-table-column>
                           <el-table-column sortable label="数量">
                               <template slot-scope="scope">
                        		   <el-input v-model="scope.row.useNumber" @change="compare(scope.$index, scope.row)" style="width:200px;"></el-input>
                        		   <span style="margin-left:10px;">{{scope.row.units}}</span>
                        	   </template>
                           </el-table-column>
                            <el-table-column prop="supply" sortable label="供应商"></el-table-column>
                            <el-table-column prop="buyTime" sortable label="购买时间"></el-table-column>
                        </el-table>
                        <div @click="addManure" class="addManure">添加农药</div>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-col :span="10">
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作照片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="病虫害" name="病虫害">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
					<el-form-item label="防治方式：">
						<el-select v-model="ruleForm.way" placeholder="请选择" @change="selectny" style="width:300px;">
							<el-option label="生物" value="生物"></el-option>
							<el-option label="农药" value="农药"></el-option>
						</el-select>  
					</el-form-item>
                    <el-row v-if="nyshow">
                        <el-table
                            :data="ruleForm.list"
                            bordero                            style="margin-top:20px;"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        >
                            <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                            <el-table-column sortable label="规格">
                                <template slot-scope="scope">{{scope.row.spec}}{{scope.row.specUnits}}</template>
                            </el-table-column>
                           <el-table-column sortable label="数量">
                               <template slot-scope="scope">
                        		   <el-input v-model="scope.row.useNumber" @change="compare(scope.$index, scope.row)" style="width:200px;"></el-input>
                        		   <span style="margin-left:10px;">{{scope.row.units}}</span>
                        	   </template>
                           </el-table-column>
                            <el-table-column prop="supply" sortable label="供应商"></el-table-column>
                            <el-table-column prop="buyTime" sortable label="购买时间"></el-table-column>
                        </el-table>
                        <div @click="addManure" class="addManure">添加农药</div>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-col :span="10">
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.beginTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                              
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作照片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="其他" name="其他">
                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="操作名称：">
                                 <el-input placeholder="请输入内容"  v-model="ruleForm.way" style="width:300px">
                                 </el-input>
                            </el-form-item>
                            <el-form-item label="开始时间：">
                                <el-date-picker
                                    v-model="ruleForm.producedTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                            <el-form-item label="操作图片：">
                                <el-upload
                                    class="upload-poster"                               
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-change="imgPreview"
                                        :auto-upload="false">
                                        <img v-if="headImg" :src="headImg" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                jpg、png、gif格式，60x60像素，不超过2MB
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="负责人：">
                                <el-select v-model="ruleForm.principalName" style="width:300px;" value-key="id" @change="getuser"  placeholder="" >
                                    <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                                </el-select>
                                
                            </el-form-item>
                            <el-form-item label="结束时间：">
                                <el-date-picker
                                    v-model="ruleForm.producedTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width:300px"
                                ></el-date-picker> 
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="采收" name="采收">
                
            </el-tab-pane>
           
        </el-tabs>
        <el-form>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="选择" :visible.sync="dialogTableVisible">
            <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="inputsName" sortable label="品名"></el-table-column>
                <el-table-column sortable label="规格">
                    <template slot-scope="scope">{{scope.row.spec}}{{scope.row.specUnits}}</template>
                </el-table-column>
                <el-table-column sortable label="数量">
                    <template slot-scope="scope">{{scope.row.surplusNumber}}{{scope.row.units}}</template>
                </el-table-column>
                <el-table-column prop="supplyName" sortable label="供应商"></el-table-column>
                <el-table-column prop="buyTime" sortable label="购买时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleSelect(scope.$index, scope.row)"
                        >选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
		</el-form>
    </div>
</template>

<script>
	
	import {farm_save,user_findByAll,inputs_findByList,plot_findByAll} from "@/request/api"
    export default {
        data(){
            return{
				plotlist:[],
				soilId:'',
				userAll:'',
                tableData:[],
                dialogTableVisible:false,
                headImg:'',
                value:'',
                activeName:'整地',
                labelPosition:'right',
                ruleForm:{
					plantId:'',
					type:"整地",
					way:'',
					beginTime:'',
					endTime:'',
					list:[],
					status:0,
					principalId:'',
					principalName:''
				},
				nyshow:false,
                id:'',
                rules:{
                    standardsImg: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                },
				currentPage:1,
				query:''
            }
        },
        mounted(){
			this.ruleForm.plantId = this.$route.query.id
	
	
			this.init()
        },
        methods:{
			getdk(ele){
			    this.ruleForm.soilId = ele.id
			    this.ruleForm.soilName = ele.name
			},
			compare(index,row){
				if(Number(row.useNumber) > Number(row.number)){
					this.$notify({
					    title: '提示',
					    message: '使用数量不能大于总量',
					    type: 'info',
					    duration:1000
					});
					row.useNumber = ""
				}
			},
			
			selectny(ele){
				if(ele == "农药"){
					this.nyshow = true
				}else{
					this.nyshow = false
				}
			},
			getuser(ele){
			    this.ruleForm.principalId = ele.id
			    this.ruleForm.principalName = ele.name
			},
			getinputs(){
				var params = {
				    query: this.query,
				    page: this.currentPage
				};
				inputs_findByList(params).then((res)=>{
					this.tableData = res.rows
				})
			},
			init(){
				// 获取员工
				user_findByAll("").then((res)=>{
				    this.userAll = res.data
				})
				
				plot_findByAll({type:2}).then((res)=>{
				    this.plotlist = res.data
				})
				
			},
            handleClick(ele){
				if(this.activeName == "施肥"){
					this.query == "肥料"
					this.getinputs()
				}
				if(this.activeName == "除草" || this.activeName == "病虫害"){
					this.query = "农药"
					this.getinputs()
				}else{
					this.nyshow = false
				}
				if(this.activeName == "采收"){
					this.$router.push({
						path:"/recovery/addrecovery"
					})
				}
				this.ruleForm.type = this.activeName
				this.ruleForm.way = ""
				this.ruleForm.beginTime = ""
				this.ruleForm.endTime = ""
				this.headImg = ""
				this.ruleForm.img = ""
				this.ruleForm.files = ""
				this.ruleForm.principalName = ""
				this.ruleForm.principalId = ""
				this.ruleForm.list = []
				this.ruleForm.soilId = ""
				this.ruleForm.soilName = ""
            },
            submitrule(){
				let formdata = new FormData();
				
				this.ruleForm.farmInputsList = JSON.stringify(this.ruleForm.list)
				for (var a in this.ruleForm) {
				    if (this.ruleForm[a] == null || this.ruleForm[a] == 'null') {
				        this.ruleForm[a] = '';
				        formdata.append(a, '');
				    } else {
				        formdata.append(a, this.ruleForm[a]);
				    }
				}
				farm_save(formdata).then((res)=>{
					this.$notify({
					    title: '操作成功',
					    message: '保存成功',
					    type: 'success'
					});
					this.$router.go(-1)
				})
            },
            backPage(){
                this.$router.go(-1)
            },
            imgPreview(file,fileList) {
                this.headImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files = file.raw
                    this.ruleForm.img = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
                
            },
            addManure(){
                this.dialogTableVisible = true
            },
            handleSelect(index,row){
                this.ruleForm.list.push({breedName:row.inputsName,spec:row.spec,specUnits:row.specUnits,inputsId:row.id,useNumber:row.surplusNumber,units:row.units,supply:row.supplyName,buyTime:row.buyTime,type:this.activeName,number:row.surplusNumber})
			
				this.dialogTableVisible = false
            }
        }
    }
</script>

<style scoped>

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .addManure{
      border-radius:8px;
      margin-top:20px;
      width:100%;
      height:60px;
      line-height:60px;
      text-align: center;
      font-size:16px;
      background:#EBF5FF 100%;
  }
</style>